<template>
	<view class="container" :class="'theme-'+theme">
	<view class="addTitle">
		<view class="titleDetail">
			<view class="titleLeft" > 
				<image src="../../static/newh5/fanhui.png" 
				class="yticon" 
				style="width: 13px;height: 20px;color:black" 
				@click="returnIndex()"
				></image>
			</view>
			<view class="titleCenter" >
			<b class="titleText">修改密码</b>
			</view>
			<view class="titleRight"  style="color: #269cd3;flex:1" > </view>
		</view>
		</view>
		<view class="input-content">
			<view class="input-item">
				<text class="tit">旧密码</text>
				<input :type='inputHide' class="inputModify" placeholder="请输入旧密码" v-model="oldPwd" />
			</view>
			<view class="input-item">
				<text class="tit">新密码</text>
				<input :type='inputHide' class="inputModify"  :placeholder="psdPlaceholder" ref='newPassword' v-model="newPwd" />
			</view>
			<view class="input-item">
				<text class="tit">确认新密码</text>
				<input :type='inputHide' class="inputModify"  :placeholder="psdPlaceholder" v-model="confirmPwd" />
			</view>
			<view class="radio-item">
				 <label class="radio" @click="modifyPasswordShow">
				 	<radio value=""  :checked="radioValue"/><b :class="radioValue== true? 'radioShow':'radioHide'">显示密码</b>
				 </label>
			</view>
			<view >
				<b style="color:#fa436a">温馨提示：</b><br>
				<text>相似密码容易被猜到，请设置与历史密码尽可能不同的新密码，以保护账户安全。</text><br>
				
			</view>
		</view>
		<button class="confirm-btn themeBgColor" :disabled="confirming" @click="modify">确认修改</button>
	</view>
</template>

<script>
import {  goback } from "@/common/utils/navigateBack.js";
	import {
		modifyPassword
	} from '../../api/user/user.js'
	import {
		checkPassword
	} from '../../common/utils/func.js'
	import JsEncrypt from "@/common/utils/jsencrypt.min.js";
	import {
		pwdStrategy,
		getPublicKey,
		encryptPwd
	} from '../../api/public/login.js'
	export default {
		data() {
			return {
				oldPwd: '',
				newPwd: '',
				confirmPwd: '',
				strategy: {},
				confirming: false,
				key: '',
				radioValue:false,
				inputShow:'text',
				inputHide:'password',
				
			}
		},
		onLoad() {
			this.getPwdStrategy()
		},
		 computed: {
			psdPlaceholder() {
			return `${this.strategy.length}～16位，至少包含数字/字母/字符串两种组合`
			},
		},
		methods: {
			returnIndex() {
				goback()
			},
			modifyPasswordShow(){
				this.radioValue = !this.radioValue
				console.log(this.$refs.newPassword.type)
				// this.inputHide = 'text'
				
				// this.$refs.newPassword.type = this.inputShow
				if(!this.radioValue){
					this.inputHide = 'password'
				}else{
					this.inputHide = 'text'
				}
			},
			getPwdStrategy() {
				pwdStrategy().then(res => {
					if (res.code === 0) {
						this.strategy = res.data;
						//强制修改 8位密码
						this.strategy.length = 8
					} else {
						this.$util.msg(res.message)
					}
				})
			},
			modify() {
				if (!this.oldPwd) {
					this.$util.msg('请输入旧密码')  
					return;
				}
				if (!this.newPwd) {
					this.$util.msg('请输入新密码')
					return;
				}
				if(this.newPwd.length >16 ){
					this.$util.msg('密码长度最多16位！')
					return;
				}
				let level = checkPassword(this.strategy.length, this.newPwd)
				if (level < this.strategy.level) {
					console.log('level',level);
					if (level === 0) {
						this.$util.msg(`密码长度至少${this.strategy.length}位！`)
					}else {
						this.$util.msg(`新密码等级过低，请输入${this.strategy.length}～16位的新密码（至少含数字/字母/字符2种组合）`)
					}
					return;
				}
				if (this.newPwd === this.oldPwd) {
					this.$util.msg('新密码与旧密码一致，请重新输入')
					return;
				}
				if (!this.confirmPwd) {
					this.$util.msg('请再次输入新密码')
					return;
				}
				if (this.newPwd !== this.confirmPwd) {
					this.$util.msg('两次输入的密码不一致')
					return;
				}
				this.confirming = true
				let userCode = uni.getStorageSync('userInfo').userCode
				let that = this
				uni.showModal({
					title: '修改密码',
					content: '修改密码成功后需重新登录，是否继续修改密码？',
					confirmText: '是',
					cancelText: '否',
					success: (suc) => {
						if (suc.confirm) {
							getPublicKey({}, userCode).then(res => {
								if (res) {
									if (res.code == 0){
										let publicKey = res.data;
										that.key = publicKey.key;
										let oldPwd = that.oldPwd
										let newPwd = that.newPwd
										if (publicKey.publicKey) {
											oldPwd = encryptPwd(publicKey,oldPwd);
											newPwd = encryptPwd(publicKey,newPwd);
										}
										const params = {
											oldPassWD: oldPwd,
											newPassWD: newPwd,
											key: that.key
										}
										modifyPassword(params).then(res => {
											if (res.code === 0) {
												that.$util.msg('修改成功')
												uni.setStorageSync('loginInfo', '')
												setTimeout(() => {
													uni.reLaunch({
														url: '/pages/public/login'
													})
												}, 500)
											} else {
												that.$util.msg('输入的旧密码有误')
												that.confirming = false;
											}
										})
									} else {
										that.$util.msg(res.message)
										that.confirming = false;
									}
									}else{
										that.$util.msg('请求超时')
										that.confirming = false;
									}
								})
						}else if(suc.cancel){
							that.confirming = false;
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page,
	.container {
		background-color: #fff;
	}

	.radioShow{
		color:#4399fc
	}
	.radioHide{
		color:#000000
	}
	.input-content {
		border-top: 1px solid $page-color-light;
		padding: 0 60upx;
		padding-top: 120rpx;
	}
	.radio-item{
		padding: 0 30upx;
		height: 80upx;
	}
	.input-item {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		padding: 0 30upx;
		background: $page-color-light;
		height: 120upx;
		border-radius: 4px;
		margin-bottom: 50upx;

		&:last-child {
			margin-bottom: 0;
		}

		.tit {
			height: 50upx;
			line-height: 56upx;
			font-size: $font-sm+2upx;
			color: $font-color-base;
		}

		input {
			height: 60upx;
			font-size: $font-base;
			color: $font-color-dark;
			width: 100%;
		}
		.inputModify{
			width: 100%;
			font-size: 14px;
			border:none;
			outline:none;
			background-color: #f8f6fc
		}
	}

	.confirm-btn {
		margin: 100rpx 60rpx;
		height: 76upx;
		line-height: 76upx;
		border-radius: 50px;
		color: #fff;
		font-size: $font-lg;

		&:after {
			border-radius: 100px;
		}
	}
</style>
